<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <title>king- layui</title>
    <link rel="stylesheet" href="../layui/css/layui.css">
    <link rel="stylesheet" href="../resource/css/mystyle.css">
</head>
<script src="./jquery.js"></script>
<!-- <script src="./lh.js"></script> -->

<!-- 第三方库 -->
<script src="../lib/easeljs.js"></script>
<script src="../lib/eventemitter2.js"></script>
<script src="../lib/roslib.js"></script>
<script src="../lib/ros2d.js"></script>

<!-- 重构图形库 -->
<script src="../src/RosCanvas.js"></script>
<script src="../src/shape/goalPoint.js"></script>
<script src="../src/shape/pointCloud.js"></script>
<script src="../src/shape/NavigationArrow.js"></script>

<!-- Nav相关操作重构 -->
<script src="../src/Nav.js"></script>
<script src="../src/nav/ClientNav.js"></script>
<script src="../src/nav/Navigator.js"></script>
<script src="../src/nav/NavController.js"></script>

<!-- SCAN 重构地图 -->
<script src="../src/Scan.js"></script>

<!--初始化配置-->
<script src="../src/index.js"></script>

<script src="../Method.js"></script>

<body onload="init()">

    <div class="my-container">
        <div class="layui-row layui-col-space10">
            <div id="nav" class="layui-col-md8 map" style="width: 80%;overflow: hidden;">
                <!-- <div class="boxA">A</div>
                <div class="boxB">B</div>
                <div class="boxC">C</div>
                <div class="boxD">D</div> -->


            </div>
            <div class="layui-col-md4" style="width: 20%;">
                <div class="log">
                    <div class="layui-card">
                        <div class="layui-card-header"></div>
                        <div class="layui-card-body">注意，这是日志内容！</div>
                    </div>
                </div>

                <div class="form">
                    <hr>
                    <br>
                    <form class="layui-form layui-form-pane" action="">
                        <div class="layui-form-item pane">
                            <label class="layui-form-label" style="background-color: rgb(50, 170, 159);">病房号</label>
                            <div class="layui-input-block  inputtest1">
                                <select name="room" lay-verify="required">
                                    <option value=""></option>
                                    <option value="1">301</option>
                                    <option value="2">302</option>
                                    <option value="3">303</option>
                                    <option value="4">304</option>
                                </select>
                            </div>
                        </div>
                        <br>
                        <div class="layui-form-item pane">
                            <label class="layui-form-label" style="background-color: rgb(50, 170, 159);">科室</label>
                            <div class="layui-input-block inputtest2">
                                <select name="bed" lay-verify="required">
                                    <option value=""></option>
                                    <option value="1">内科</option>
                                    <option value="2">外科</option>
                                    <option value="3">麻醉科</option>
                                    <option value="4">检验科</option>
                                    <option value="5">放射科</option>
                                    <option value="6">皮肤科</option>
                                    <option value="6">皮肤科</option>
                                    <option value="6">皮肤科</option>
                                    <option value="6">皮肤科</option>
                                </select>
                            </div>
                        </div>
                        <div class="layui-row layui-col-space15">
                            <div class="layui-col-md12">
                                <div class="layui-panel">
                                    <div id="myid" style="padding: 30px; font-size: 16px; text-align: center;" onclick="geturl()">请刷卡！</div>
                                </div>
                            </div>
                            <div class="layui-form-item pane" style="text-align: center;">
                                <button id="deliver" class="layui-btn layui-btn-lg" style="width:100%;height:100px;" lay-submit lay-filter="deliveryForm">立即配送</button>
                            </div>
                            <!-- background-color="rgb(50,170,159)" -->
                    </form>
                    </div>
                </div>
                <script src="../layui/layui.js"></script>
                <script>
                    layui.use(['form', 'layer'], function() {
                        var form = layui.form,
                            layer = layui.layer;

                        form.on('submit(deliveryForm)', function(data) {
                            console.log(data.elem) //被执行事件的元素DOM对象，一般为button对象
                            console.log(data.form) //被执行提交的form对象，一般在存在form标签时才会返回
                            console.log(data.field) //当前容器的全部表单字段，名值对形式：{name: value}
                            layer.msg('收到指令，正在配送')
                            return false; //阻止表单跳转。如果需要表单跳转，去掉这段即可。
                        });
                    });
                </script>
                <!--获取时间日志-->
                <script>
                    var firstlog = document.querySelector('.log');

                    function logtime() {
                        //设置当前时间
                        var date = new Date();
                        var year = date.getFullYear(); //月份从0~11，所以加一
                        var dateArr = [date.getMonth() + 1, date.getDate(), date.getHours(), date.getMinutes(), date.getSeconds()];
                        for (var i = 0; i < dateArr.length; i++) {
                            if (dateArr[i] >= 1 && dateArr[i] <= 9) {
                                dateArr[i] = "0" + dateArr[i];
                            }
                        }
                        var strDate = year + '-' + dateArr[0] + '-' + dateArr[1] + ' ' + dateArr[2] + ':' + dateArr[3] + ':' + dateArr[4];
                        console.log(firstlog.children[0].children[0]);
                        firstlog.children[0].children[0].innerHTML = strDate;
                    }
                    logtime();
                </script>
                <script>
                    const deliverBtn = document.getElementById("deliver")
                    deliverBtn.className += " layui-btn-disabled"
                    let prevData = ''

                    function geturl() {
                        $.get('http://127.0.0.1:5000/check/admin', (data, status) => {
                            console.log(data)
                            var label = document.getElementById("myid");
                            label.innerHTML = data;
                            const deliverBtn = document.getElementById("deliver")
                            if (!data) {
                                deliverBtn.className = "layui-btn layui-btn-lg layui-btn-disabled"
                                deliverBtn.style = "pointer-events: none;width:100%;height:100px;"
                                label.innerHTML = "请刷卡"
                            } else {
                                deliverBtn.className = "layui-btn layui-btn-lg"
                                deliverBtn.style = "width:100%;height:100px;"
                            }
                        })
                    }
                    setInterval(() => {
                        geturl()
                    }, 500)
                </script>
</body>

</html>